import { ProjectListTem, TextListTemplate, FouVideo, FouThrFou } from '../Template'
import { CommonSmallTitle } from '../Assets/Common/SmallTitle'

export const FouThr = () => {
    const TopList = [
        { uuid: 1, label: '设备编号', flex: 120, value: 'one' },
        { uuid: 2, label: '在线状态', flex: 120, value: 'two' },
        { uuid: 3, label: '司机认证', flex: 120, value: 'thr' },
        { uuid: 4, label: '预警信息', flex: 218, value: 'fou' },
    ]
    const DataOne = [
        { uuid: 1, one: '#1', two: '在线', thr: '匹配', fou: '无异常' },
        { uuid: 2, one: '#2', two: '在线', thr: '匹配', fou: '无异常' },
        { uuid: 3, one: '#3', two: '在线', thr: '匹配', fou: '无异常' },
        { uuid: 4, one: '#4', two: '在线', thr: '匹配', fou: '无异常' },
        { uuid: 5, one: '#5', two: '在线', thr: '匹配', fou: '无异常' },
        { uuid: 6, one: '#6', two: '在线', thr: '匹配', fou: '无异常' },
        { uuid: 7, one: '#7', two: '在线', thr: '匹配', fou: '无异常' },
        { uuid: 8, one: '#8', two: '在线', thr: '匹配', fou: '无异常' },
        { uuid: 9, one: '#9', two: '在线', thr: '匹配', fou: '无异常' },
        { uuid: 10, one: '#10', two: '在线', thr: '匹配', fou: '无异常' },
    ]

    const ListTwo = [
        { uuid: 1, img: 'FouOne001.png', label: '高度', value: 'A01', unit: 'm' },
        { uuid: 2, img: 'FouOne005.png', label: '载重', value: 'A02', unit: 't' },
        { uuid: 3, img: 'FouOne003.png', label: '倾角1', value: 'A03', unit: '°' },
        { uuid: 4, img: 'FouOne003.png', label: '倾角2', value: 'A04', unit: '°' },
        { uuid: 5, img: 'FouOne007.png', label: '速度', value: 'A05', unit: 'm/s' },
    ]
    const DataTwo = {
        A01: 134,
        A02: 44,
        A03: 24,
        A04: 18,
        A05: 16,
    }

    return (
        <>
            <ProjectListTem type={1} />
            <CommonSmallTitle title="塔吊运行预警" style={{ marginRight: 16 }}>
                <div className="one">
                    <TextListTemplate top={TopList} data={DataOne} />
                    <div className="box">
                        <div className="title">
                            <div>#4 塔吊</div>
                            <div>认证司机 : 某某某</div>
                            <div>无异常</div>
                        </div>
                        <FouThrFou list={ListTwo} data={DataTwo} />
                    </div>
                </div>
            </CommonSmallTitle>
            <CommonSmallTitle title="塔吊监控">
                <FouVideo />
            </CommonSmallTitle>
        </>
    )
}
